<template>
	<view>
		<view class="warp-content flex bg-white row-between">
			<view class="lg" style="color: #646363;margin-left: 60rpx;">
				填写下单信息
			</view>
			<navigator url="/bundle/pages/longtime_list/longtime_list" hover-class="none">
			<view class="list-btn flex-content">
				订单记录
			</view>
			</navigator>
		</view>
		<view class="p-20">
			<view class="bg-white" style="width: 100%;">
				<view class="distrubution-content flex p-t-24">
					<view class="my-icon m-l-40">
						
					</view>
					<view class="lg m-l-30" style="color: #807F7F;">
						配送信息
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
						装车时间
					</view>
					<view class="right-content flex row-between">
				          <view class="lg">
				          <arrival-time  @changtime="changtime"></arrival-time>
				          </view>
						  <view class="">
						  	<u-icon name="arrow-right" color="#807F7F" size="32"></u-icon>
						  </view>
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
                          服务时长
					</view>
					<view class="right-content flex ">
						<view class="" style="width: 200rpx;">
							<u-input placeholder="请输入天数" v-model="timelengtth"></u-input>
						</view>
				          天
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          需要车型
					</view>
					<view class="right-content flex row-between">
						<view class="lg" @click="selectCar()" >
							<view >{{typeValue}}</view>
							
						</view>
				     <view class="">
				     	<u-icon name="arrow-right" color="#807F7F" size="32"></u-icon>
				     </view>
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          装货地址
					</view>
					<view class="right-content flex row-between">
						<view class="" >
							<u-input placeholder="请输入装货地址" v-model="startaddress"></u-input>
						</view>
				          
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          配送区域
					</view>
					<view class="right-content flex row-between">
						<view class="" >
							<u-input  placeholder="请输入配送区域" v-model="endaddress"></u-input>
						</view>
				          
						  
					</view>
				</view>
				
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          运输里程
					</view>
					<view class="right-content flex row-between">
						<view class="" >
							<u-input placeholder="请输入运输里程(公里)" v-model="transportlength"></u-input>
						</view>
				          
						  
					</view>
				</view>
			</view>
		</view>
		<view class="p-20">
			<view class="bg-white" style="width: 100%;">
				<view class="distrubution-content flex p-t-24">
					<view class="my-icon m-l-40">
						
					</view>
					<view class="lg m-l-30" style="color: #807F7F;">
						其他信息
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
						单位名称
					</view>
					<view class="right-content flex row-between">
				          <view style="width: 450rpx;">
				         <u-input  placeholder="请输入单位名称" v-model="companyname"></u-input>
				          </view>
						
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
		                  结算方式
					</view>
					<view class="right-content flex ">
						<view class="" style="width: 450rpx;">
							<u-input  placeholder="请输入结算方式" v-model="settlemode"></u-input>
						</view>
				          
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          货物类型
					</view>
					<view class="right-content flex ">
						<view class="" style="width: 450rpx;">
							<u-input placeholder="请输入货物类型" v-model="thingtype"></u-input>
						</view>
				          
						  
					</view>
				</view>
				<view class=" p-t-20" style="display: flex;">
					<view class="left-content lg p-l-30">
				          补充说明
					</view>
					<view class="right-content flex row-between" style="border: none;">
						<view class="" style="width: 100%;">
								<u-input v-model="remarkvalue" placeholder="请输入备注" type="textarea" :border="true" :height="150"
								 :auto-height="true" />
						</view>
				          
						  
					</view>
				</view>
				 <view class="" style="height: 160rpx;">
				 	
				 </view>
					</view>
					</view>
					<view class="btm-content flex" style="z-index: 10;">
						<view class="lg" style="color: #E85631; margin-left: 74rpx;">
							我出价：
						</view>
						<view class="flex money-content">
							<view class="" style="width: 170rpx;">
									<u-input placeholder="请输入价格" v-model="money"></u-input>
							</view>
							<view class="title-btm">
								元/趟
							</view>
						</view>
						<view @click="affirmFn" class="affirm-btn xl flex-content">
							确认下单
						</view>
					</view>
	</view>
</template>

<script>
	import {businessOrderadd} from "@/api/order"
	import {selectTimeList} from "@/utils/tools"
	export default {
		data() {
			return {
			timeobj:{},
			remarkvalue:"",
			companyname:"",
			selecttime:"",
			startaddress:"",
			settlemode:"",
			money:"",
			timestamp:"",
			transportlength:"",
			thingtype:"",
			timelengtth:"",
			info:{
				car_category_id:"",
				car_id:""
			},
			endaddress:"",
			typeValue:"请选择车型"
			}
		},
		onLoad(option) {
			//生成选择时间
			this.timeobj=selectTimeList()
			
	       this.selecttime=`${this.timeobj.selecttime[0][0]}  ${this.timeobj.selecttime[1][0]}`
              this.changtime(this.selecttime)
		},
		methods:{
			//确认下单
			async affirmFn(){
			
				let requestData={
					loading_time:this.timestamp,
					service_time:this.timelengtth,
					car_id:this.info.car_id,
					loading_address:this.startaddress,
					distribution_address:this.endaddress,
					distance:this.transportlength,
					name:this.companyname,
					settlement_type:this.settlemode,
					type:this.thingtype,
					note:this.remarkvalue||' ',
					money:this.money,
					loading_longitude:12,
					loading_latitude:12,
					distribution_longitude:12,
					distribution_latitude:12
				}
				let res=await businessOrderadd(requestData)
			},
			selectCar(){
				uni.navigateTo({
					url:'/bundle/pages/dr_apply/select_car'
				})
			},
     changtime(item){
	let data=new Date()
	let year=data.getFullYear()
     let timer=`${year}-${item}:00`
	var dateres= new Date(timer);

	this.timestamp=dateres.getTime()/1000
		
}
		}
	}
</script>

<style scoped lang="scss">
	.affirm-btn{
		color: #FFFFFF;
		background-color: #E85631;
		width: 248rpx;
		height: 70rpx;
		border-radius: 10rpx;
	}
	.money-content{
		padding-left: 18rpx;
		width: 278rpx;
		height: 66rpx;
		background-color: #F9F9F9;
	}
	.h-100{
		width: 100%;
		height: 100rpx;
	}
	.left-content{
		
		color:#807F7F;
	}
.warp-content{
	width: 100%;
	height: 106rpx;
}
.title-btm{
	position: relative;
}
.title-btm::before{
	content: "";
	width: 2rpx;
	left: -10rpx;
	height: 40rpx;
	position: absolute;
	background-color: #EAEAEA ;
}
.list-btn{
	width: 144rpx;
	height: 52rpx;
	margin-right: 38rpx;
	border-radius: 6rpx;
	box-shadow: 0rpx 0rpx 10rpx #A2997A;
}
.p-20{
	padding: 20rpx;
}
.my-icon{
	width: 10rpx;
	height: 38rpx;
	border-radius: 5rpx;
	background-color: #8282D2;
}
.distrubution-content{
	height: 88rpx;
	width: 100%;
	border-bottom: 2rpx solid #F4F4F4;
}
.right-content{
	height: 100%;
	width: 445rpx;
	margin-left: 80rpx;
	border-bottom: 7rpx solid #F4F4F4;
}
.btm-content{
	width: 100%;
	height: 132rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0rpx;
	
}
</style>
